<template>
    <div class="order_list">
        <!-- 单件 -->
        <div class="order_list_item" @click="detailsClick">
            <div class="order_list_header">
                <text class="order_list_header_title">{{orderData.itemList[0].name}}</text>
                <text class="order_list_header_status">{{orderData.statusDescr}}</text>
            </div>
            <div class="order_list_content" v-if="orderData.itemList.length ==1" v-for="item in orderData.itemList">
                <div class="order_list_content_img mg-r20">
                    <image style="width:170px;height:170px" :src="item.thumbnail"></image>
                </div>
                <div class="order_list_content_box">
                    <div class="order_list_content_top" v-if="item.point>0">
                        <text class="order_list_content_name">{{item.name}}</text>
                        <text class="order_list_content_price">兑换券{{item.point | number}}</text>
                    </div>
                    <div class="order_list_content_top" v-else>
                      <text class="order_list_content_name">{{item.name}}</text>
                      <text class="order_list_content_price">¥{{item.price | price}}</text>
                    </div>
                    <div class="order_list_content_bottom">
                        <text class="order_list_content_subtitle">{{item.spec}}</text>
                        <text class="order_list_content_number">x {{item.quantity | number}}</text>
                    </div>
                </div>
            </div>

            <div class="order_list_content" v-if="orderData.itemList.length >1">
                <div class="order_list_content_img mg-r20" v-if="index==0 || index==1" v-for="(item,index) in orderData.itemList">
                    <image style="width:170px;height:170px" :src="item.thumbnail"></image>
                </div>
                <div class="order_list_content_more">
                    <text class="order_item_more_number">共计{{orderData.subQuantity}}件</text>
                    <!--                    <text class="iconfont icon-arrow order_item_icon"></text>-->
                    <icon class="order_item_icon" content="ios-arrow-forward"></icon>
                </div>
            </div>

            <div class="order_list_content_information">
                <text class="order_list_content_left">共计{{orderData.subQuantity}}件商品</text>

                <div class="order_price_box"  v-if="orderData.subPoint <= 0">
                    <text class="order_price_title">实付款：</text>
                    <text class="order_price_icon">¥</text>
                    <text class="order_price_number">{{orderData.amountPayable | price}}</text>
                </div>

                <div class="order_price_box"  v-if="orderData.subPoint > 0">
                <text class="order_price_title">兑换券：</text>
                <text class="order_price_icon">¥</text>
                <text class="order_price_number">{{orderData.subPoint | number}}</text>
              </div>

            </div>
            <!-- 待付款 -->
            <div class="order_list_botton"
                 v-if="orderData.orderStatus == 0 && orderData.paymentStatus == 0 && orderData.shippingStatus == 0">
                <!--                @click="cancelOrder(orderData.id)"-->
                <div class="order_list_botton_gray" >
                    <text class="order_list_botton_gray_title">取消订单</text>
                </div>
                <!--                catchtap="paymentClick"-->
                <div class="order_list_botton_red botton_Bg_Color mg-l20" >
                    <text class="order_list_botton_red_title botton_Fz_Color">付款</text>
                </div>
            </div>
            <!-- 待发货 -->
            <div class="order_list_botton"
                 v-if="orderData.paymentStatus == 1 && orderData.shippingStatus == 0 && orderData.orderStatus == 1">
                <!--                @click="refund"-->
                <div class="order_list_botton_gray" >
                    <text class="order_list_botton_gray_title">退款</text>
                </div>
                <!--                @click="remindShipping"-->
                <div class="order_list_botton_red botton_Bg_Color mg-l20" >
                    <text class="order_list_botton_red_title  botton_Fz_Color">提醒发货</text>
                </div>
            </div>
            <!-- 待收货 -->
            <div class="order_list_botton"
                 v-if="orderData.paymentStatus == 1 && orderData.shippingStatus == 1 && orderData.orderStatus == 1">
                <!--                @click="lookLogistics"-->
                <div class="order_list_botton_gray" >
                    <text class="order_list_botton_gray_title">查看物流</text>
                </div>
                <!--                @click="refund"-->
                <div class="order_list_botton_gray mg-l20" >
                    <text class="order_list_botton_gray_title">退货</text>
                </div>
                <!--                @click="confirmReceipt"-->
                <div class="order_list_botton_red botton_Bg_Color mg-l20" >
                    <text class="order_list_botton_red_title  botton_Fz_Color">确认收货</text>
                </div>
            </div>
            <!-- 交易成功 -->
            <div class="order_list_botton"
                 v-if="orderData.paymentStatus == 1 && orderData.shippingStatus == 1 && orderData.orderStatus ==2">
                <!--                @click="evaluate"-->
                <div class="order_list_botton_red botton_Bg_Color mg-l20" >
                    <text class="order_list_botton_red_title  botton_Fz_Color">评价</text>
                </div>
                <!--                catchtap="again"-->
                <div class="order_list_botton_red botton_Bg_Color mg-l20" >
                    <text class="order_list_botton_red_title  botton_Fz_Color">再次购买</text>
                </div>
            </div>
            <!-- 交易关闭 -->
            <div class="order_list_botton" v-if="orderData.orderStatus == 3 || orderData.orderStatus == 4">
                <!--                @click="delClick"-->
                <div class="order_list_botton_gray" >
                    <text class="order_list_botton_gray_title">删除订单</text>
                </div>
                <!--                @click="again"-->
                <div class="order_list_botton_red botton_Bg_Color mg-l20" >
                    <text class="order_list_botton_red_title  botton_Fz_Color">再次购买</text>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        cancel,
        reminder,
        find,
        received,
        payment,
        del
    } from '../../api/order.js';
    import {
        submit,
        query
    } from '../../api/payment';
    import {
        buyForOrder
    } from '../../api/cart'
    // const util = require('../../utils/util.js')
    // let app = getApp();
    export default {
        data() {
            return {}
        },
        props:[
            'orderData'
        ],
        filters:{
            price(value) {
                var toFixedNum = Number(value).toFixed(3);
                var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
                return realVal;
            },
            number(value){
                var toFixedNum = Number(value).toFixed(0);
                return toFixedNum;
            }
        },
        methods:{
            // refundsclick() {
            //      wx.navigateTo({
            //         url: '/pages/member/order/refund?id=' + this.data.orderData.id,
            //     })
            // },
            detailsClick() {
                var _this = this
                eeui.openPage({
                        pageName: 'orderRefund',
                        params: this.orderData.id,
                        url: 'root://pages/member/order/refund_details.js',
                        statusBarType: 'immersion',
                        statusBarStyle:false
                    },
                    (result) => {

                    }
                );
            },
            // cancelOrder(data) { // 取消订单
            //     console.log(data)
            //     var _this = this
            //     wx.showModal({
            //         title: '确认取消订单？',
            //         content: '取消后可在已关闭订单再次购买',
            //         success(res) {
            //             if (res.confirm) {
            //                 console.log('用户点击确定')
            //                 _this.loadCancel(data.currentTarget.dataset.id)
            //             } else if (res.cancel) {
            //                 console.log('用户点击取消')
            //             }
            //         }
            //     })
            // },
            // loadCancel(data) {
            //     var _this = this
            //     console.log(data)
            //     cancel(data).then(
            //         res => {
            //             console.log(res)
            //             if (res.type == 'success') {
            //                 wx.showToast({
            //                     title: res.content,
            //                 })
            //                 _this.refresh()
            //             }
            //         }
            //     ).catch(error => {
            //         wx.showToast({
            //             title: error.content,
            //         })
            //     })
            // },
            // refund(data) { // 退款
            //     wx: wx.navigateTo({
            //         url: '/pages/member/order/refund?id=' + this.data.orderData.id,
            //     })
            // },
            // remindShipping(data) { // 提醒发货
            //     console.log(data)
            //     var _this = this
            //     reminder(_this.data.orderData.id).then(
            //         res => {
            //             console.log(res)
            //             if (res.type == 'success') {
            //                 wx.showToast({
            //                     title: res.content,
            //                 })
            //             }
            //         }
            //     ).catch(error => {
            //         wx.showToast({
            //             title: error.content,
            //         })
            //     })
            // },
            // lookLogistics(data) { // 查看物流
            //     wx.navigateTo({
            //         url: '/pages/member/logistics/list?id=' + this.data.orderData.id,
            //     })
            // },
            // confirmReceipt(data) { // 确认收货
            //     console.log(data)
            //     var _this = this
            //     wx.showModal({
            //         title: '提示',
            //         content: '是否确认收货！',
            //         success(res) {
            //             if (res.confirm) {
            //                 received(_this.data.orderData.id).then(
            //                     res => {
            //                         console.log(res)
            //                         if (res.type == 'success') {
            //                             wx.showToast({
            //                                 title: res.content,
            //                             })
            //                             _this.refresh()
            //                         }
            //                     }
            //                 ).catch(error => {
            //                     console.log(error)
            //                 })
            //             } else if (res.cancel) {
            //                 console.log('用户点击取消')
            //             }
            //         }
            //     })
            // },
            //
            //
            // confirmClick() {
            //     wx.navigateTo({
            //         url: '/pages/member/order/confirm',
            //     })
            // },
            // again() { // 再次购买
            //     var _this = this
            //     var product = this.data.orderData.itemList[0]
            //     let data = {}
            //     data.orderId = product.orderId
            //     data.uuid = app.globalData.uuid
            //     buyForOrder(data).then(
            //         res => {
            //             if (res.type == 'success') {
            //                 wx.navigateTo({
            //                     url: '/pages/goods/submit/index',
            //                 })
            //             }
            //         }
            //     ).catch(error => {
            //         wx.showToast({
            //             title: '服务器开小差了，请重新点击购买',
            //             icon: 'none',
            //             duration: 2000
            //         })
            //     })
            // },
            // evaluate(data) { // 评价
            //     console.log(data)
            //     wx.navigateTo({
            //         url: '/pages/member/order/evaluation?id=' + this.data.orderData.id,
            //     })
            // },
            // refresh() {
            //     this.triggerEvent('refresh')
            // },
            // delClick() {
            //     var _this = this
            //     wx.showModal({
            //         title: '提示',
            //         content: '是否确认删除！',
            //         success(res) {
            //             if (res.confirm) {
            //                 del(_this.data.orderData.id).then(
            //                     res => {
            //                         if (res.type == 'success') {
            //                             _this.refresh()
            //                         }
            //                     }
            //                 ).catch(error => {
            //                     console.log(error)
            //                 })
            //             } else if (res.cancel) {
            //                 console.log('用户点击取消')
            //             }
            //         }
            //     })
            // },
            // paymentClick() { // 付款
            //     payment(this.data.orderData.id).then(res => {
            //         if (res.type == 'success') {
            //             console.log(res)
            //             this.submitClick(res)
            //         } else {
            //             wx.showToast({
            //                 title: '支付失败',
            //             })
            //         }
            //     }).catch(error => {
            //         wx.showToast({
            //             title: error.content,
            //         })
            //     })
            // },
            // submitClick(data) {
            //     var _this = this
            //     _this.data.sn = data.data.sn
            //     wx.showLoading({
            //         title: '加载中...',
            //     })
            //     submit({
            //         paymentPluginId: 'weixinMiniPayPlugin',
            //         sn: data.data.sn
            //     }).then(res => {
            //         console.log(res)
            //         wx.hideLoading()
            //         if (res.type == 'success') {
            //             wx.requestPayment({
            //                 'timeStamp': res.data.timeStamp,
            //                 'nonceStr': res.data.nonceStr,
            //                 'package': res.data.package,
            //                 'signType': res.data.signType,
            //                 'paySign': res.data.paySign,
            //                 'success': function (red) {
            //                     _this.queryClick()
            //                 },
            //                 'fail': function (red) {
            //                     console.log(red);
            //                 }
            //             })
            //         } else {
            //             wx.showToast({
            //                 title: '支付失败',
            //             })
            //         }
            //     }).catch(error => {
            //         wx.showToast({
            //             title: error.content,
            //         })
            //     })
            // },
            // queryClick() {
            //     var _this = this
            //     query({
            //         sn: _this.data.sn
            //     }).then(res => {
            //         console.log(res)
            //         if (res.type == 'success') {
            //             wx.showToast({
            //                 title: '支付成功',
            //                 icon: 'success',
            //                 duration: 1500,
            //                 success: function () {
            //                     setTimeout(function () {
            //                         _this.refresh()
            //                     }, 1500)
            //                 }
            //             })
            //         } else {
            //             _this.refresh()
            //         }
            //     }).catch(error => {
            //         wx.showToast({
            //             title: error.content,
            //         })
            //     })
            // },
        }
    }
</script>
<style lang="css" src="../../style/wx.css"/>
<style scoped>
    /*@import '../../style/wx.css'; !*引入公共样式*!*/
    .order_list {
        width: 750px;
        padding-left: 25px;
        padding-right: 25px;
        box-sizing: border-box;
    }

    .order_list_item {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-top: 20px;
        padding: 25px;
        box-sizing: border-box;
    }

    .order_list_header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 650px;
        height: 40px;
    }

    .order_list_header_title {
        font-size: 24px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        width: 520px;
        lines:1;
        text-overflow: ellipsis;
    }

    .order_list_header_status {
        font-size: 24px;
        font-weight: 400;
        color: rgba(215, 38, 28, 1);
    }

    .order_list_content {
        width: 650px;
        display: flex;
        flex-direction: row;
        margin-top: 42px;
        position: relative;
    }

    .order_list_content_img {
        width: 170px;
        height: 170px;
        background: rgba(250, 250, 250, 1);
        border-radius: 4px;
        overflow: hidden;
    }

    .order_list_content_box {
        display: flex;
        flex-direction: column;
    }

    .order_list_content_top {
        width: 460px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .order_list_content_name {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        display: block;
        lines:1;
        width: 400px;
        text-overflow: ellipsis;
    }

    .order_list_content_price {
        font-size: 18px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }

    .order_list_content_bottom {
        width: 460px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .order_list_content_subtitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
        width: 400px;
        text-overflow: ellipsis;
        lines:2;
    }

    .order_list_content_number {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .order_list_content_information {
        width: 650px;
        height: 40px;
        background: rgba(0, 0, 0, 0);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        margin-top: 40px;
    }

    .order_list_content_left {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .order_price_title {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }

    .order_price_icon {
        font-size: 20px;
        font-weight: 400;
        color: #eb594f;
        line-height: 36px;
    }

    .order_price_number {
        font-size: 24px;
        font-weight: 400;
        color: #eb594f;
        line-height: 36px;
    }
    .order_price_box{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .order_list_botton {
        width: 650px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        margin-top: 40px;
    }

    .order_list_botton_gray {
        width: 136px;
        height: 48px;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(126, 128, 136, 0.8);
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 25px;
    }

    .order_list_botton_gray_title {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 0.5);
    }


    .order_list_botton_red {
        width: 136px;
        height: 48px;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.8;
    }

    .order_list_botton_red_title {
        font-size: 24px;
        font-weight: 400;
        /* color: white; */
    }

    .order_list_content_more {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        right: 0;
        height: 170px;
    }

    .order_item_icon {
        font-size: 36px;
        opacity: 0.3;
        width: 50px;
        height: 50px;
    }

    .order_item_more_number {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
    }

    .mg-l20 {
        margin-left: 20px;
    }

    .mg-r20 {
        margin-right: 20px
    }
</style>
